{% extends "order/order_base.html" %}

{% load inventree_extras %}
{% load status_codes %}
{% load i18n %}
{% load static %}


{% block sidebar %}
{% include 'order/po_sidebar.html' %}
{% endblock sidebar %}

{% block page_content %}
{% settings_value "PURCHASEORDER_EDIT_COMPLETED_ORDERS" as allow_extra_editing %}

<div class='panel panel-hidden' id='panel-order-items'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Purchase Order Items" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.change %}
                {% if order.is_pending or allow_extra_editing %}
                <a class='btn btn-primary' href='{% url "po-upload" order.id %}' role='button'>
                    <span class='fas fa-file-upload side-icon'></span> {% trans "Upload File" %}
                </a>
                <button type='button' class='btn btn-success' id='new-po-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Line Item" %}
                </button>
                {% endif %}
                {% if order.status == PurchaseOrderStatus.PLACED %}
                <button type='button' class='btn btn-primary' id='receive-selected-items' title='{% trans "Receive Line Items" %}'>
                    <span class='fas fa-sign-in-alt'></span> {% trans "Receive Line Items" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-toolbar-buttons' class='btn-group' style='float: right;'>
            {% if roles.purchase_order.change %}
            {% if order.is_pending or allow_extra_editing %}
            <div class='btn-group' role='group'>
                <!-- Multiple-select actions -->
                <button id='multi-select-options' class='btn btn-primary dropdown-toggle' data-bs-toggle='dropdown'>
                    <span class='fas fa-tools'></span> <span class='caret'></span>
                </button>
                <ul class='dropdown-menu'>
                    <li><a class='dropdown-item' href='#' id='po-lines-bulk-delete' title='{% trans "Delete Line Items" %}'>
                        <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Line Items" %}
                    </a></li>
                </ul>
            </div>
            {% endif %}
            {% endif %}

            {% include "filter_list.html" with id="purchase-order-lines" %}
        </div>

        <table class='table table-striped table-condensed' id='po-line-table' data-toolbar='#order-toolbar-buttons'>
        </table>
    </div>

    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Extra Lines" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.purchase_order.change %}
                {% if order.is_pending or allow_extra_editing %}
                <button type='button' class='btn btn-success' id='new-po-extra-line'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Extra Line" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='order-extra-toolbar-buttons' class='btn-group' style='float: right;'>
            <div class='btn-group'>
                {% include "filter_list.html" with id="purchase-order-extra-lines" %}
            </div>
        </div>
        <table class='table table-striped table-condensed' id='po-extra-lines-table' data-toolbar='#order-extra-toolbar-buttons'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-received-items'>
    <div class='panel-heading'>
        <h4>{% trans "Received Items" %}</h4>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-order-attachments'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Attachments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "attachment_button.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "attachment_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-order-notes'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Order Notes" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "notes_buttons.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <textarea id='order-notes'></textarea>
    </div>
</div>

{% endblock page_content %}

{% block js_ready %}

{{ block.super }}

    onPanelLoad('order-notes', function() {
        setupNotesField(
            'order-notes',
            '{% url "api-po-detail" order.pk %}',
            {
                {% if roles.purchase_order.change %}
                editable: true,
                {% else %}
                editable: false,
                {% endif %}
            }
        );
    });

    onPanelLoad('order-attachments', function() {
        loadAttachmentTable('{% url "api-po-attachment-list" %}', {
            filters: {
                order: {{ order.pk }},
            },
            fields: {
                order: {
                    value: {{ order.pk }},
                    hidden: true,
                }
            }
        });
    });

    loadStockTable($("#stock-table"), {
        params: {
            purchase_order: {{ order.id }},
            part_detail: true,
            supplier_part_detail: true,
            location_detail: true,
        },
        buttons: [
            '#stock-options',
        ],
        filterkey: "postock"
    });

{% if order.status == PurchaseOrderStatus.PENDING %}
$('#new-po-line').click(function() {

    createPurchaseOrderLineItem({{ order.pk }}, {
        {% if order.supplier %}
        supplier: {{ order.supplier.pk }},
        {% if order.supplier.currency %}
        currency: '{{ order.supplier.currency }}',
        {% endif %}
        {% endif %}
        onSuccess: function() {
            $('#po-line-table').bootstrapTable('refresh');
        }
    });
});

{% elif order.status == PurchaseOrderStatus.PLACED %}

    $('#receive-selected-items').click(function() {
        let items = getTableData('#po-line-table');

        receivePurchaseOrderItems(
            {{ order.id }},
            items,
            {
                success: function() {
                    $("#po-line-table").bootstrapTable('refresh');
                }
            }
        );
    });

{% endif %}

onPanelLoad('order-items', function() {
    loadPurchaseOrderLineItemTable('#po-line-table', {
        order: {{ order.pk }},
        {% if order.supplier %}
        supplier: {{ order.supplier.pk }},
        {% endif %}
        {% if roles.purchase_order.change %}
        allow_edit: true,
        {% else %}
        allow_edit: false,
        {% endif %}
        {% if order.status == PurchaseOrderStatus.PENDING %}
        pending: true,
        {% endif %}
        {% if order.status == PurchaseOrderStatus.PLACED and roles.purchase_order.change %}
        allow_receive: true,
        {% else %}
        allow_receive: false,
        {% endif %}
    });

    $("#new-po-extra-line").click(function() {

        createExtraLineItem({
            order: {{ order.pk }},
            table: '#po-extra-lines-table',
            url: '{% url "api-po-extra-line-list" %}',
            {% if order.supplier.currency %}
            currency: '{{ order.supplier.currency }}',
            {% endif %}
        });
    });

    loadExtraLineTable({
        table: '#po-extra-lines-table',
        order: {{ order.pk }},
        url: '{% url "api-po-extra-line-list" %}',
        name: 'purchaseorderextraline',
        filtertarget: '#filter-list-purchase-order-extra-lines',
        {% settings_value "PURCHASEORDER_EDIT_COMPLETED_ORDERS" as allow_edit %}
        {% if order.is_pending or allow_edit %}
        allow_edit: {% js_bool roles.purchase_order.change %},
        allow_delete: {% js_bool roles.purchase_order.delete %},
        {% else %}
        allow_edit: false,
        allow_delete: false,
        {% endif %}
        pricing: true,
    });
});

loadOrderTotal(
    '#poTotalPrice',
    {
        url: '{% url "api-po-detail" order.pk %}',
    }
);

enableSidebar('purchaseorder');

{% endblock %}
